<template>
  <div style="width: 100%; height: 100%; background-color: white; display: flex; justify-content: center; align-items: center;">
    <div style="width: 40%; height: 80%; background-color: white; overflow: scroll;">
      <el-button type="success" style="margin-bottom: 40px;" @click="addTypeDialog">添加顶级分类</el-button>

      <CourseTypeTree ref="mytree" :param="treeParam"></CourseTypeTree>

    </div>

    <!-- 弹出框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="dialogVisible"
      width="30%">

      <span style="text-align: left;">
        <div>父级分类：{{pnode}}</div>
        <div style="margin-top: 20px;">分类的名称：<el-input style="width: 200px;" v-model="form.courseName"></el-input></div>
      </span>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import CourseTypeTree from './CourseTypeTree'

  export default {
    //注册局部组件
    components: {CourseTypeTree},
    data() {
      return {
        dialogVisible: false,
        data: null,
        pnode: null,
        form: {
          pid: null,
          courseName: null
        },
        //树形结构需要的参数
        treeParam: {
          btns: [{
            btnName: "添加子分类",
            click: (data) => {
              //设置父id为当前节点的id
              this.form.pid = data.id;
              this.pnode = data.label;
              //打开弹出框
              this.dialogVisible = true;
            }
          },{
            btnName: "删除当前分类",
            click: (data) => {

            }
          }]
        }
      }
    },
    methods: {
      //添加分类
      insertType(){
         this.$.ajax({
           type: "POST",
           url: "/course/type/insert",
           data: this.form,
           success: (data) => {
             this.$message.success("添加成功！");
             this.dialogVisible = false;
             this.form = {};

             //重新加载树状结构
             this.$refs.mytree.queryCourseTypeTree();
           }
         });
      },
      //添加顶级分类的方法
      addTypeDialog() {
        //设置父id为空
        this.form.pid = null;
        this.pnode = "无";
        //打开弹出框
        this.dialogVisible = true;
      }
    }
  };
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
